<template>
  <div class="app-container">
    <el-row :gutter="10" >
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :header-cell-style="{ background: '#F3F5FC' }"
      :data="tableData"
      style="width: 100%; "
      height="100%"
      :default-expand-all="false"
      class="ftable"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table  :header-cell-style="{ background: '#F3F5FC' }" :data="props.row.children" style="padding: 0;" >
           <el-table-column type="expand">
            <template slot-scope="props">
               <el-table   :header-cell-style="{ background: '#F3F5FC' }" :data="props.row.children" style="padding: 0;">
                <el-table-column prop="name" label="版本"></el-table-column>
               </el-table>
            </template>
           </el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <div style="color: #2979ff">
                  <span v-show="!scope.row.parentName">产品厂商</span>
                  <span v-show="scope.row.parentName && scope.row.children"
                    >版本号</span
                  >
                  {{ scope.row.date }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="产品信息"> </el-table-column>
      <el-table-column prop="address" label="名称">
        <template slot-scope="scope">
          <div style="color: #2979ff">
            <span v-show="!scope.row.parentName">产品厂商</span>
            <span v-show="scope.row.parentName && scope.row.children"
              >版本号</span
            >
            {{ scope.row.date }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改角色配置对话框 -->
 <productinfo-dia ref="proinfo_dia"></productinfo-dia>
  </div>
</template>

<script>

import productList from "../mockData/productInformation.json";
import ProductinfoDia from "../component/ProductinfoDia.vue";
export default {
    data() {
        return {
            total: 14,
            // 遮罩层
            loading: true,
            tableData: [],
            // 查询参数
            queryParams: {
                deptName: undefined,
                status: undefined,
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询角色列表 */
        getList() {
            this.loading = true;
            this.tableData = productList.data;
            console.log(this.tableData);
        },
        /** 新增按钮操作 */
        handleAdd() {
            // this.getMenuTreeselect();
            this.$refs.proinfo_dia.open = true;
            this.title = "添加角色";
        },
        resetForm() {
            this.$refs["elForm"].resetFields();
        },
    },
    components: { ProductinfoDia }
};
</script>
<style lang="scss" scoped>
.app-container{
  display: flex;
  flex-direction: column;

}
.el-table {
flex: 1;
&::v-deep .el-table__expanded-cell{
  padding-left: 40px;
}
}
// 对对话框做修改
::v-deep .el-dialog__body {
  // max-height: 540px;
  padding: 0px !important;
  overflow: auto;
}
</style>
<style lang="scss">



// .ftable{
//   thead tr th:first-of-type{
// display: none;
//   }
//   tbody tr td:first-of-type{
// display: none;
//   }
// }
</style>